SSR 模式原理

服务端渲染（SSR）在服务器生成 HTML 内容，客户端加载后接管交互。

SSR 基本原理

JavaScript

请求 → 服务器渲染 HTML → 返回完整页面 → 客户端注水

Vite SSR 特点

特点	说明
模块图分离	客户端和服务端独立模块图
按需编译	服务端只编译需要的模块
源码模式	服务端使用源码而非构建产物

SSR 构建流程

JavaScript

// 服务端入口
import { renderToString } from 'vue/server-renderer'
import App from './App.vue'

export async function render(url) {
  const app = createSSRApp(App)
  const html = await renderToString(app)
  return html
}

注意：SSR 需要服务端运行环境（Node.js）。

客户端与服务端对比

对比项	客户端	服务端
运行环境	浏览器	Node.js
模块格式	ESM	ESM
渲染方式	DOM 操作	字符串输出
生命周期	完整	仅渲染

SSR 优势

SEO 友好：搜索引擎可抓取完整内容
首屏快速：直接返回渲染好的 HTML
性能优化：减少客户端渲染负担

客户端注水

JavaScript

// 客户端入口
import { createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)
app.mount('#app')

注水过程：客户端接管服务端渲染的静态 HTML，绑定交互逻辑。

Vite SSR 配置

text

export default defineConfig({
  // SSR 特定配置
  ssr: {
    noExternal: ['vue-router']  // 不外部化的依赖
  }
})

要点总结

SSR 服务端生成静态 HTML
客户端注水接管交互
模块图分离客户端和服务端
服务端使用源码按需编译